<template>
  <el-header>
    <div class="header-content">
      <span class="logo">中国风音乐平台</span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-avatar size="small" class="avatar" src="https://avatars.githubusercontent.com/u/1?v=4" />
          <span>管理员</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
</script>

<style scoped>
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: linear-gradient(to right, #f9f4e8, #e8dfca); /* 使用与 sidebar 相同的渐变背景 */
  color: #4b3f33; /* 主文字颜色与 sidebar 一致 */
  height: 60px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影与 sidebar 一致 */
  border-bottom: 1px solid #d6c8b0; /* 与 sidebar 边框颜色一致 */
  font-family: 'KaiTi', 'SimSun', serif; /* 保持中国风的字体 */
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #4b3f33;
  letter-spacing: 3px;
  font-family: 'KaiTi', 'SimSun', serif; /* 使用中国风字体 */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* 字体阴影效果 */
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: #4b3f33;
  cursor: pointer;
  font-size: 16px;
  font-family: 'KaiTi', 'SimSun', serif;
}

.avatar {
  margin-right: 8px;
}

.el-dropdown-menu {
  min-width: 140px;
  background-color: #fff;
  border: 1px solid #d6c8b0; /* 与 sidebar 边框颜色一致 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-dropdown-item {
  font-size: 16px;
  color: #4b3f33;
  font-family: 'KaiTi', 'SimSun', serif;
}

.el-dropdown-item:hover {
  background-color: #f9f4e8; /* 与 sidebar 悬停背景一致 */
  color: #333;
}
</style>
